<template>
  <div class="app-container">
    <el-row :gutter="10" class="row">
      <el-col :span="6" class="col">
        <el-row class="mb" style="height: 70%">
          <div class="carSupply">
            <img src="@/assets/image/sucess.svg" class="icon" />
            <el-card class="trace-card top">
              <div class="title">别克GL802</div>
              <el-tag>唯一溯源码：{{ "1652081040014nhwyx" }}</el-tag>
              <el-row class="time">
                <el-col :span="12" style="border-right: 1px solid #e6e3e3">
                  <el-descriptions direction="vertical" size="small">
                    <el-descriptions-item label="首次查询时间">{{
                      "202-2-13 15:00:00"
                    }}</el-descriptions-item>
                  </el-descriptions>
                </el-col>
                <el-col :span="12" style="text-align: end">
                  <el-descriptions direction="vertical" size="small">
                    <el-descriptions-item label="查询次数">{{
                      "第31次查询"
                    }}</el-descriptions-item>
                  </el-descriptions>
                </el-col>
              </el-row>
            </el-card>
            <el-card class="trace-card bottom">
              <el-col :span="12" class="col">
                <img
                  src="@/assets/image/carlogo.png"
                  style="height: 110px; width: 150px"
                />
              </el-col>
              <el-col :span="12" class="col">
                <div class="title">上汽汽车通用品牌</div>
                <div class="description">
                  心静而思远, 神动则行随, 志在千里者, 行之而后乃成功
                </div>
              </el-col>
            </el-card>
            <div class="circle circle-top"></div>
            <div class="circle circle-bottom"></div>
            <div class="line line-left"></div>
            <div class="line line-right"></div>
          </div>
        </el-row>
        <el-row style="height: calc(40% -10px)">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span class="subtitle">分销商</span>
              <div class="logo-img">
                <img src="@/assets/image/logo.png" />联盟链
              </div>
            </div>
            <div class="text item">
              <el-col :span="6">工厂名称</el-col>
              <el-col :span="18" class="right">{{
                "上海万兴世界汽车销售服务有限公司"
              }}</el-col>
            </div>
            <div class="text item">
              <el-col :span="6">地址</el-col>
              <el-col :span="18" class="right">{{
                "上海市周家嘴路330号"
              }}</el-col>
            </div>
            <div class="text item">
              <el-col :span="6">录入时间</el-col>
              <el-col :span="18" class="right">{{
                "2022/02/27 12:30:13"
              }}</el-col>
            </div>
            <div class="text item">
              <el-col :span="6">唯一溯源码</el-col>
              <el-col :span="18" class="right">{{
                "67dg34g76f3d856ftfy35gdg"
              }}</el-col>
            </div>
          </el-card>
        </el-row>
      </el-col>
      <el-col :span="6" class="col">
        <el-row class="mb" style="height: 30%">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span class="subtitle">蓄电池零件供应商</span>
              <div class="logo-img">
                <img src="@/assets/image/logo.png" />联盟链
              </div>
            </div>
            <div class="text item">
              <el-col :span="6">工厂名称</el-col>
              <el-col :span="18" class="right">{{
                "柯瑞蓄电池有限公司"
              }}</el-col>
            </div>
            <div class="text item">
              <el-col :span="6">产品数据</el-col>
              <el-col :span="18" class="right">{{
                "瓦尔塔汽车蓄电池EFB系列-H5-L4-E4-2"
              }}</el-col>
            </div>
            <div class="text item">
              <el-col :span="6">录入时间</el-col>
              <el-col :span="18" class="right">{{
                "2022/02/27 12:30:13"
              }}</el-col>
            </div>
            <div class="text item">
              <el-col :span="6">唯一溯源码</el-col>
              <el-col :span="18" class="right">{{ "1254534234NHYMXS" }}</el-col>
            </div>
          </el-card>
        </el-row>
        <el-row style="height: calc(35% - 10px); margin-bottom: 10px">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span class="subtitle">轮胎零件供应商</span>
              <div class="logo-img">
                <img src="@/assets/image/logo.png" />联盟链
              </div>
            </div>
            <div class="text item">
              <el-col :span="6">工厂名称</el-col>
              <el-col :span="18" class="right">{{
                "大陆马牌汽车轮胎有限公司"
              }}</el-col>
            </div>
            <div class="text item">
              <el-col :span="8">产品数据</el-col>
              <el-col :span="16" class="right">{{
                "轮胎+4d42f32rv4r5g4fte1cd4fewerwr"
              }}</el-col>
            </div>
            <div class="text item">
              <el-col :span="6">录入时间</el-col>
              <el-col :span="18" class="right">{{
                "2022/01/27 12:30:13"
              }}</el-col>
            </div>
            <div class="text item">
              <el-col :span="6">唯一溯源码</el-col>
              <el-col :span="18" class="right">{{
                "3232sdwafs3r23rafsfd"
              }}</el-col>
            </div>
          </el-card>
        </el-row>
        <el-row style="height: calc(35% - 10px)">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span class="subtitle">火花塞零件供应商</span>
              <div class="logo-img">
                <img src="@/assets/image/logo.png" />联盟链
              </div>
            </div>
            <div class="text item">
              <el-col :span="6">工厂名称</el-col>
              <el-col :span="18" class="right">{{
                "上海德科电子仪表有限公司"
              }}</el-col>
            </div>
            <div class="text item">
              <el-col :span="8">产品数据</el-col>
              <el-col :span="16" class="right">{{
                "火花塞+32d42f32rv4r5g4fte1cd4fewerwr"
              }}</el-col>
            </div>
            <div class="text item">
              <el-col :span="6">录入时间</el-col>
              <el-col :span="18" class="right">{{
                "2022/01/27 12:30:13"
              }}</el-col>
            </div>
            <div class="text item">
              <el-col :span="6">唯一溯源码</el-col>
              <el-col :span="18" class="right">{{
                "546464572414867dfgadgdv"
              }}</el-col>
            </div>
          </el-card>
        </el-row>
      </el-col>
      <el-col :span="6" class="col">
        <el-row class="mb" style="height: 30%">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span class="subtitle">钢材原材料供应商</span>
              <div class="logo-img">
                <img src="@/assets/image/logo.png" />联盟链
              </div>
            </div>
            <div class="text item">
              <el-col :span="6">工厂名称</el-col>
              <el-col :span="18" class="right">{{
                "重庆宝钢汽车钢材有限公司"
              }}</el-col>
            </div>
            <div class="text item">
              <el-col :span="8">产品数据</el-col>
              <el-col :span="16" class="right">{{
                "钢材+78df42f32rv4r5g4fte1cd4fewerwr"
              }}</el-col>
            </div>
            <div class="text item">
              <el-col :span="6">录入时间</el-col>
              <el-col :span="18" class="right">{{
                "2022/01/27 12:30:13"
              }}</el-col>
            </div>
            <div class="text item">
              <el-col :span="6">唯一溯源码</el-col>
              <el-col :span="18" class="right">{{
                "34dg34g76f3d856ftfy35gdg"
              }}</el-col>
            </div>
          </el-card>
        </el-row>
        <el-row style="height: calc(35% - 10px); margin-bottom: 10px">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span class="subtitle">尼龙原材料供应商</span>
              <div class="logo-img">
                <img src="@/assets/image/logo.png" />联盟链
              </div>
            </div>
            <div class="text item">
              <el-col :span="8">工厂名称</el-col>
              <el-col :span="16" class="right">{{
                "兰芬奇工程塑料苏州有限公司"
              }}</el-col>
            </div>
            <div class="text item">
              <el-col :span="6">产品数据</el-col>
              <el-col :span="18" class="right">{{
                "尼龙改进混合材料+97fcf42f32rv4r5g4fte1cd4fewerwr345gdsfgeetw4653"
              }}</el-col>
            </div>
            <div class="text item">
              <el-col :span="6">录入时间</el-col>
              <el-col :span="18" class="right">{{
                "2022/01/27 12:30:13"
              }}</el-col>
            </div>
            <div class="text item">
              <el-col :span="6">唯一溯源码</el-col>
              <el-col :span="18" class="right">{{
                "46gfgsg574357gfgshgsd"
              }}</el-col>
            </div>
          </el-card>
        </el-row>
        <el-row style="height: calc(35% - 10px)">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span class="subtitle">区块链信息</span>
              <div class="logo-img">
                <img src="@/assets/image/logo.png" />联盟链
              </div>
            </div>
            <div
              style="
                height: 70%;
                display: flex;
                justify-content: center;
                align-items: center;
              "
            >
              <i class="el-icon-success"></i>
              <span>本产品溯源码已在联盟链上存证</span>
            </div>
            <div class="text item">
              <el-col :span="6" class="info">存证信息</el-col>
              <el-col :span="12">{{ "46gfgsg574357gfgshgsd" }}</el-col>
              <el-button :span="6" type="text" class="btn">立即查验</el-button>
            </div>
          </el-card>
        </el-row>
      </el-col>
      <el-col :span="6" class="col" style="background-color: #0f55db">
        <el-row class="right_top" style="height: 6%">
          <el-col :span="18" class="info">印刻链溯源查验</el-col>
        </el-row>
        <el-row class="mb" style="height: 15%">
          <el-card class="box-card">
            <div class="icon">
              <i class="el-icon-success"></i>
              <span>信息已上链</span>
            </div>
            <div class="text item">
              <el-tag class="tagInfo">
                <img src="@/assets/image/safe.svg" class="safeIcon" />
                <el-col :span="6">溯源码</el-col>
                <el-col :span="18">{{ "46gfgsg574357gfgshgsd" }}</el-col>
              </el-tag>
            </div>
          </el-card>
        </el-row>
        <el-row class="mb" style="height: calc(74% - 10px)">
          <el-card class="box-card">
            <div class="product-info">
              <li class="even">存证名称</li>
              <li class="odd">别克GL802</li>
              <li class="even">上传主体</li>
              <li class="odd">溯源平台测试使用公司</li>
            </div>
            <el-divider direction="horizontal" class="mydivider"></el-divider>
            <div class="text item right">
              <el-col :span="8">环节1：分销商</el-col>
              <el-col :span="16" class="right">
                <el-button type="text" style="color: #1bd7b3"
                  >已完成存证</el-button
                >
              </el-col>
            </div>
            <div
              style="background-color: #e7f3ff; min-height: 28%; width: 100%"
            >
              <div class="text item right_part">
                <el-col :span="8">区块高度</el-col>
                <el-col :span="16" class="right">{{ "24" }}</el-col>
              </div>
              <div class="text item right_part">
                <el-col :span="8">上链时间</el-col>
                <el-col :span="16" class="right">{{
                  "钢材+78df42f32rv4r5g4fte1cd4fewerwr"
                }}</el-col>
              </div>
              <div class="text item right_part">
                <el-col :span="8">印刻链-编号</el-col>
                <el-col :span="16" class="right">{{
                  "78df42f32rv4r5g4fte1cd4fewerwrdsjbgadughiuaweawebtviawetdsgdsgerger"
                }}</el-col>
              </div>
            </div>
            <div class="text item right">
              <el-col :span="10">环节2：整车厂商</el-col>
              <el-col :span="14" class="right">
                <el-button type="text" style="color: #1bd7b3"
                  >已完成存证</el-button
                >
              </el-col>
            </div>
            <div
              style="background-color: #e7f3ff; min-height: 28%; width: 100%"
            >
              <div class="text item right_part">
                <el-col :span="8">区块高度</el-col>
                <el-col :span="16" class="right">{{ "24" }}</el-col>
              </div>
              <div class="text item right_part">
                <el-col :span="8">上链时间</el-col>
                <el-col :span="16" class="right">{{
                  "钢材+78df42f32rv4r5g4fte1cd4fewerwr"
                }}</el-col>
              </div>
              <div class="text item right_part">
                <el-col :span="8">印刻链-编号</el-col>
                <el-col :span="16" class="right">{{
                  "78df42f32rv4r5g4fte1cd4fewerwrdsjbgadughiuaweawebtviawetdsgdsgerger"
                }}</el-col>
              </div>
            </div>
          </el-card>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import axios from "axios";
// import BlockInfo from "./BlockInfo";

export default {
  // components: { BlockInfo },
  data() {
    return {
      queryBlockByNumDrawer: false,
      channelBlockInfo: "",
      blockInfo: "",
      previousBlockInfo: "",
      previousBlockInfo2: "",
      open: false,
      blockInfoHash: "",
      option: {
        data: [],
      },
      traceId: "",
      retailerInfo: "",
      productData: "",
      activeName: "1",
      cropsProcessDetailsArray: [],
      cropsDriverArray: [],
      machingInfo: "",
      operationArray: [],
      cropsDetails: "",
    };
  },
  created() {
    this.$httpBlock
      .get(this.$httpUrl + "/blockexplorerapi/channelBlockInfo")
      .then((res) => {
        this.channelBlockInfo = res;
        let data1 = {
          title: "区块高度",
          subtitle: "实时",
          count: res.data.height.low,
          text: "当前区块高度",
          color: "rgb(27, 201, 142)",
          key: "高",
        };
        this.option.data.push(data1);
        //当前区块
        var number = Number(this.channelBlockInfo.data.height.low - 1);
        this.$httpBlock
          .get(
            this.$httpUrl + "/blockexplorerapi/queryBlockInfo?number=" + number
          )
          .then((res) => {
            this.blockInfo = res;
          })
          .catch((err) => {
            console.log("err " + err);
          });

        //前一个区块
        var previous = Number(this.channelBlockInfo.data.height.low - 2);
        this.$httpBlock
          .get(
            this.$httpUrl +
              "/blockexplorerapi/queryBlockInfo?number=" +
              previous
          )
          .then((res) => {
            this.previousBlockInfo = res;
          })
          .catch((err) => {
            console.log("err " + err);
          });

        //前2个区块
        var previous2 = Number(this.channelBlockInfo.data.height.low - 3);
        this.$httpBlock
          .get(
            this.$httpUrl +
              "/blockexplorerapi/queryBlockInfo?number=" +
              previous2
          )
          .then((res) => {
            this.previousBlockInfo2 = res;
          })
          .catch((err) => {
            console.log("err " + err);
          });
      })
      .catch((err) => {
        console.log("err " + err);
      });

    //this.getHash();
  },
  methods: {
    handleClick() {
      if (this.activeName === "1") {
        this.$httpBlock
          .get(
            this.$httpUrl +
              "/farmerapi/queryCropsProcessByCropsId?id=" +
              this.productData.crops_id
          )
          .then((res) => {
            const array = [];
            for (let i = 0; i < res.data.length; i++) {
              array.push(res.data[i].Record);
            }
            this.cropsProcessDetailsArray = array;
          })
          .catch((err) => {});
      }
      if (this.activeName === "2") {
        this.$httpBlock
          .get(
            this.$httpUrl +
              "/driverapi/queryTransportByCropsId?id=" +
              this.productData.crops_id
          )
          .then((res) => {
            const array = [];
            this.len = res.data.length;
            for (let i = 0; i < res.data.length; i++) {
              array.push(res.data[i].Record);
            }
            this.cropsDriverArray = array;
          })
          .catch((err) => {});
      }
      if (this.activeName === "3") {
        this.$httpBlock
          .get(
            this.$httpUrl +
              "/materialapi/queryMachiningByCropsId?id=" +
              this.productData.crops_id
          )
          .then((res) => {
            this.machingInfo = res.data[0].Record;
          })
          .catch((err) => {});
      }
      if (this.activeName === "4") {
        this.$httpBlock
          .get(
            this.$httpUrl +
              "/productapi/queryOperationByCropsId?id=" +
              this.productData.crops_id
          )
          .then((res) => {
            const array = [];
            for (let i = 0; i < res.data.length; i++) {
              array.push(res.data[i].Record);
            }
            this.operationArray = array;
          })
          .catch((err) => {
            this.msgError("查询异常 " + err);
          });
      }
      if (this.activeName === "5") {
        this.$httpBlock
          .get(
            this.$httpUrl +
              "/farmerapi/queryCropsById?id=" +
              this.productData.crops_id
          )
          .then((res) => {
            this.cropsDetails = res.data;
          })
          .catch((err) => {});
      }
    },

    query() {
      this.$httpBlock
        .get(
          this.$httpUrl + "/retailerapi/queryRetailerById?id=" + this.traceId
        )
        .then((res) => {
          this.retailerInfo = res.data; //零售
          this.$httpBlock
            .get(
              this.$httpUrl +
                "/productapi/queryProductInfoByCropsId?id=" +
                res.data.crops_id
            )
            .then((res) => {
              this.productData = res.data[0].Record; //产品信息
              this.handleClick();
            })
            .catch((err) => {
              this.msgError("查询异常 " + err);
            });
        })
        .catch((err) => {
          console.log("调用失败 " + JSON.stringify(err));
        });
    },

    queryInfo(hash) {
      this.open = true;
      this.$httpBlock
        .get(this.$httpUrl + "/blockexplorerapi/queryBlockBuHash?hash=" + hash)
        .then((res) => {
          this.blockInfoHash = res;
          this.$refs.getBlockInfoRef.init(res);
        })
        .catch((err) => {
          console.log("err " + err);
        });
    },

    getHash() {
      var number = Number(this.channelBlockInfo.data.height.low);
      this.$httpBlock
        .get(
          this.$httpUrl + "/blockexplorerapi/queryBlockInfo?number=" + number
        )
        .then((res) => {
          this.blockInfo = res;
        })
        .catch((err) => {
          console.log("err " + err);
        });
    },

    queryBlockByNum() {
      this.queryBlockByNumDrawer = true;
    },
  },
};
</script>

<style lang="scss" scoped>
.app-container {
  width: 100%;
  height: calc(100vh - 84px);
  min-height: 768px;
  padding: 20px 20px 10px;
  .row {
    height: 100%;
  }
  .carSupply {
    height: 100%;
    background: url("../../assets/image/car.png") no-repeat;
    background-size: 100% 60%;
    position: relative;
    .icon {
      position: absolute;
      top: 26%;
      left: 50%;
      height: 35px;
      width: 35px;
      -webkit-transform: translateX(-50%);
      transform: translateX(-50%);
      z-index: 20;
    }
    .trace-card {
      position: absolute;
      width: 100%;
      &.top {
        height: 35%;
        top: 30%;
        background-color: rgb(214, 212, 212);
        text-align: center;
        background-image: radial-gradient(
          circle at 96.5% 92.5%,
          transparent 5px,
          rgb(255, 255, 255) 9px
        );
        .title {
          font-size: 18px;
          margin-bottom: 5px;
        }
        ::v-deep .time {
          border-top: 1px solid #e2e1e1;
          margin-top: 10px;
          padding: 10px;
          .el-descriptions-item__cell {
            text-align: center;
          }
        }
      }
      &.bottom {
        height: 33%;
        bottom: 0;
        background-color: rgb(214, 212, 212);
        background-image: radial-gradient(
          circle at 96.5% 10px,
          transparent 5px,
          rgb(255, 255, 255) 9px
        );

        .description {
          color: gray;
          margin-top: 10px;
          font-size: 14px;
        }
      }
    }
    .circle {
      width: 60px;
      height: 20px;
      background: red;
      position: absolute;
      border-radius: 4px;
      top: 60.5%;
      left: 2px;
      background-color: rgb(214, 212, 212);
      background-image: radial-gradient(
        circle at 15px 10px,
        transparent 5px,
        rgb(255, 255, 255) 9px
      );
      &.circle-bottom {
        top: 67.5%;
      }
    }
    .line {
      width: 4px;
      height: 5.5%;
      background: #cbd6f4;
      border-radius: 30%;
      position: absolute;
      top: 63%;
      &.line-left {
        left: 15px;
      }
      &.line-right {
        right: 13px;
      }
    }
  }
  .col {
    height: 100%;
    .right_top {
      margin-top: 8%;
      text-align: center;
      margin-left: 20%;
      font-size: 22px;
      color: white;
    }
  }
  .mb {
    margin-bottom: 10px;
  }
}

::v-deep .box-card {
  height: 100%;
  .el-card__header {
    background: #e7f3ff;
  }
  .el-card__body {
    padding: 0px 20px 10px 20px;
    height: calc(100% - 53px);
  }
  .icon {
    height: 70%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 5px;
  }
  .subtitle {
    line-height: 31px;
  }
  .logo-img {
    float: right;
    padding: 3px 0;
    display: inline-flex;
    align-items: center;
    img {
      width: 25px;
      height: 25px;
    }
  }
  .mydivider {
    margin: -13px 8px;
    margin-bottom: 8px;
    border: 1px dashed #fff;
  }
  .product-info {
    height: 30%;
    width: 85%;
    margin-top: 20px;
    font-size: 15px;
    margin-left: 30px;

    li {
      padding: 0 5px;
      height: 20%;
      display: flex;
      align-items: center;
      white-space: nowrap;
      flex-direction: column;
      display: flex;
      justify-content: center;
    }
    .odd {
      background: #e7f3ff;
    }
    .even {
      background: #f5f8ff;
      color: gray;
    }
  }
  .item {
    min-height: 45px;
    border-bottom: 1px solid #e6e3e3;
    display: flex;
    align-items: center;
    &.right_part {
      margin-left: 10px;
    }
    .tagInfo {
      display: flex;
      align-items: center;
      width: 95%;
      margin-left: 5px;
      .safeIcon {
        width: 25px;
        height: 25px;
      }
    }

    .btn {
      margin-bottom: 3px;
    }
    .right {
      text-align: right;
      word-break: break-all;
      margin-right: 10px;
      color: gray;
    }

    &:nth-last-child(1) {
      border-bottom: unset;
    }
  }

  .el-icon-success {
    color: #67c23a;
    font-size: 20px;
  }
}
.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}
@media (max-height: 768px) {
  .app-container {
    font-size: 14px;
    .title {
      font-size: 16px;
    }
    p {
      font-size: 12px;
    }
  }
}

#input-box {
  display: block;
  width: 100%;
  height: 46px;
  margin-bottom: 15px;
  border: none;
  border-radius: 6px;
  background: #add8e6;
  padding: 0 5px;
  text-align: right;
  font-size: 20px;
  color: #ffffff;
  font-weight: bold;
  letter-spacing: 1px;
}
</style>
